/*
 * @Description: 
 * @Author: 葛玉根
 * @Date: 2021-03-04 10:34:39
 * @LastEditTime: 2021-03-08 18:10:52
 * @LastEditors: 葛玉根
 */
import React, { useEffect, useState } from 'react';
import './index.less';

import { Table, Tag, Space, Button, Modal, Input, Form, ConfigProvider  } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import zhCN from 'antd/lib/locale/zh_CN';
const { confirm } = Modal;

import { useDispatch, useSelector, ClassRoomModelState } from 'umi';
export default function Page() {
  const dispatch = useDispatch()
  let { data } = useSelector((model: { classroom:ClassRoomModelState }) => model.classroom)
  useEffect(() => {
    dispatch({
      type: 'classroom/getClassRoom'
    })
  }, [])
  let del = (datas: any) => {
    showDeleteConfirm(datas)
  }
  function showDeleteConfirm(datas:any) {
    confirm({
      title: '确定删除教室号吗?',
      icon: <ExclamationCircleOutlined />,
      content: '请谨慎选择',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        dispatch({
          type: 'classroom/deleClassRoom',
          payload: {
            room_id: datas.room_id
          }
        })
      },
      onCancel() {
      },
    });
  }
  const columns = [
    {
      title: '教室号',
      dataIndex: 'room_text',
      key: 'grade_id',
    },
    {
      title: '操作',
      key: 'action',
      render: (text: any, record: any) => (
        <Space size="middle">
          <Button type="link" style={{ color: '#cccccc' }} danger={true} onClick={() => del(text)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const onFinish = (values: any) => {
    if (values.room) {
      dispatch({
        type: 'classroom/addClassRoom',
        payload: {
          room_text: values.room
        }
      })
      handleOk()
    }
  };
  return (
    <div>
      <h1 className="classRoomTitle">教室管理</h1>
      <div className="classRoomBox">
        <div className="addRoom">
          <Button type="primary" onClick={showModal}>
            + 添加教室
        </Button>
          <Modal title="添加班级" visible={isModalVisible} footer={null} onCancel={handleCancel}>
            <Form
              name="basic"
              initialValues={{ remember: true }}
              // onFinishFailed={onFinishFailed}
              onFinish={onFinish}
            >
              <Form.Item
                label="教室号"
                name="room"
                rules={[{ required: true, message: '不能为空' }]}
                wrapperCol={{ span: 10 }}

              >
                <Input placeholder="教室名" />
              </Form.Item>
              <Form.Item>
                <Button type="ghost" onClick={handleCancel} style={{ marginLeft: '210px', marginTop: '20px' }}>
                  取消
              </Button>
                <Button type="primary" htmlType="submit" style={{ marginLeft: '20px', marginTop: '20px' }}>
                  提交
              </Button>
              </Form.Item>
            </Form>

          </Modal>
        </div>

        {
          <ConfigProvider locale={zhCN}>
            <Table dataSource={data} columns={columns} rowKey={(record) => record.room_id} />
          </ConfigProvider>
        }
      </div>
    </div>
  );
}
